<template>
  <div class="news-box">
    <div
      v-for="item in newsList"
      :key="item.id"
      class="news-item"
      @click="itemClick(item)"
    >
      <div class="ct-box">
        <div>
          <img :src="item.img" />
        </div>
        <div class="news-infos">
          <div class="news-title">{{ item.title }}</div>
          <div class="news-summary">{{ item.detail }}</div>
          <div class="news-tag">
            <span v-for="tag in item.tags" :key="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      newsList: [
        {
          id: 0,
          title: "聚划算《划算8点档》首秀 点亮跨年直播高光时刻",
          img: require("assets/images/news/news1.jpg"),
          authorName: "Admin",
          detail:
            "12月30日,聚划算上线全新直播栏目《划算8点档》,创意打造明星直播真人秀综艺,首推官店联播创新模式,通过聚划算官方直播间的中心化组织,实现对六大品牌直播间的精准流量扶持,同时以娱乐化的直播内容,为品牌打造跨年破圈声量。这是《划算8点档》的首次亮相,也是聚划算跨年直播的高光时刻。未来每晚8点,聚划算都会为消费者带来数个精选品牌直播间的极致划算好货。",
          tags: ["商业", "企业"],
        },
        {
          id: 1,
          title: "品牌成交新客占比超85%，抖音电商全民冰雪季是怎么做到的？",
          img: require("assets/images/news/news2.jpg"),
          authorName: "Admin",
          detail:
            "近日，抖音电商服饰行业IP——抖in新风潮发起全民冰雪季活动，联合卡西欧、The North Face、VANS、鸭鸭、骆驼等品牌，结合雪季户外服饰营销机会点和冬奥热点，打造了一场极寒户外滑雪场景营销，专业滑雪赛+潮流音乐节+蹦迪云连麦，围绕年轻族群兴趣场景进行直播内容布局，掀起冬日冰雪新风潮。",
          tags: ["资讯", "企业"],
        },
        {
          id: 2,
          title: "茄子科技王超出席Morketing灵眸大赏：共探出海“共生”新机遇",
          img: require("assets/images/news/news3.jpg"),
          authorName: "Admin",
          detail:
            "12月30日，以“共生”为主题的第六届“Morketing Summit 2021·灵眸大赏”在上海举办。会上，茄子科技（海外SHAREit Group）合伙人王超与现场嘉宾就出海现状、赛道红利、营销方案等进行交流，并共同展望2022年品牌出海趋势。",
          tags: ["商业", "企业"],
        },
        {
          id: 3,
          title: "从共创命运单曲到践行环保主义，聚划算解锁公益营销新思路",
          img: require("assets/images/news/news4.jpg"),
          authorName: "Admin",
          detail:
            "2021年,人与自然的命运共同体关系愈加清晰深刻。这一年,亿万网友挂念着救护放归的东北虎“完达山1号”有没有找到领地,关心着云南野象旅行团一路北上的路线,甚至在社交平台边看河狸直播边“云认领”河狸宝宝……",
          tags: ["企业"],
        },
        {
          id: 4,
          title: "超四成消费者追求家的安全感，家居向全屋智能进阶 |CBNData报告",
          img: require("assets/images/news/news5.jpg"),
          authorName: "Admin",
          detail:
            "指纹解锁，AI语音说着“欢迎回家”，踏进家门，屋里的灯自动打开，空调与空气净化器调至适宜设定，送来清新空气，这样的场景已成为许多人的日常，我们的居家生活正在越来越智能化。数据显示，中国智能家居市场规模逐年扩大，天猫平台智能家居品牌数量也快速增长，2019-2021年增幅超100%。",
          tags: ["企业", "资讯"],
        },
      ],
    };
  },
  methods: {
    itemClick(item) {
      this.$router.push({
        name: "NewsDetail",
        params: { newsInfo: item, id: item.id },
      });
    },
  },
};
</script>

<style scoped>
.news-box {
  padding: 8px;
}
.news-item {
  margin-bottom: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.news-item .ct-box {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: 30% 67%;
  padding: 6px;
}
.news-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}
.news-infos .news-summary {
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: var(--gray);
}
.news-tag {
  text-align: right;
}
.news-tag span + span {
  margin-left: 5px;
}
.news-tag span {
  font-size: 12px;
  display: inline-block;
  padding: 3px 5px;
  border-radius: 6px;
  background: #cacaca;
  color: #fff;
}
</style>